<template>
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">部门管理</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">管理组织架构和部门信息</p>
      </div>
      <button class="btn-primary flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        新增部门
      </button>
    </div>

    <!-- 部门统计 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="card text-center">
        <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{{ totalDepts }}</div>
        <div class="text-gray-600 dark:text-gray-400">总部门数</div>
      </div>
      <div class="card text-center">
        <div class="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">{{ activeDepts }}</div>
        <div class="text-gray-600 dark:text-gray-400">启用部门</div>
      </div>
      <div class="card text-center">
        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">{{ totalEmployees }}</div>
        <div class="text-gray-600 dark:text-gray-400">总员工数</div>
      </div>
      <div class="card text-center">
        <div class="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2">{{ deptLevels }}</div>
        <div class="text-gray-600 dark:text-gray-400">部门层级</div>
      </div>
    </div>

    <!-- 部门管理区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 组织架构树 -->
      <div class="lg:col-span-2 card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">组织架构</h3>
          <div class="flex items-center gap-2">
            <button class="btn-secondary text-sm">展开全部</button>
            <button class="btn-secondary text-sm">收起全部</button>
            <button class="btn-secondary text-sm">导出架构</button>
          </div>
        </div>

        <div class="space-y-2">
          <div v-for="dept in deptTree" :key="dept.id" class="border border-gray-200 dark:border-gray-700 rounded-lg">
            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800/50">
              <div class="flex items-center gap-3">
                <svg
                  class="w-5 h-5 text-gray-600 dark:text-gray-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <span class="font-medium text-gray-900 dark:text-gray-100">{{ dept.name }}</span>
                <span
                  class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded-full">
                  {{ dept.employeeCount }} 人
                </span>
                <span :class="getStatusBadgeClass(dept.status)">
                  {{ dept.status === 'active' ? '启用' : '禁用' }}
                </span>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ dept.leader }}</span>
                <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                </button>
                <button class="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            </div>

            <div v-if="dept.children && dept.children.length > 0" class="p-4 space-y-2">
              <div
                v-for="child in dept.children"
                :key="child.id"
                class="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 ml-6">
                <div class="flex items-center gap-3">
                  <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span class="text-gray-900 dark:text-gray-100">{{ child.name }}</span>
                  <span
                    class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded-full">
                    {{ child.employeeCount }} 人
                  </span>
                  <span :class="getStatusBadgeClass(child.status)">
                    {{ child.status === 'active' ? '启用' : '禁用' }}
                  </span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-sm text-gray-500 dark:text-gray-400">{{ child.leader }}</span>
                  <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                  </button>
                  <button class="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 部门详情 -->
      <div class="card">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">部门详情</h3>

        <div v-if="selectedDept" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">部门名称</label>
            <input type="text" :value="selectedDept.name" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">部门编码</label>
            <input type="text" :value="selectedDept.code" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">上级部门</label>
            <select class="input">
              <option value="">无上级部门</option>
              <option value="1">技术部</option>
              <option value="2">产品部</option>
              <option value="3">运营部</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">部门负责人</label>
            <input type="text" :value="selectedDept.leader" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">联系电话</label>
            <input type="text" :value="selectedDept.phone" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">排序</label>
            <input type="number" :value="selectedDept.sort" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">状态</label>
            <select class="input">
              <option value="active">启用</option>
              <option value="inactive">禁用</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">描述</label>
            <textarea class="input" rows="3" :value="selectedDept.description"></textarea>
          </div>

          <div class="flex items-center gap-3">
            <button class="btn-primary flex-1">保存</button>
            <button class="btn-secondary flex-1">取消</button>
          </div>
        </div>

        <div v-else class="text-center text-gray-500 dark:text-gray-400 py-8">
          <svg
            class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
          </svg>
          <p>选择一个部门查看详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="system-dept">
import { ref, computed } from 'vue'

defineOptions({ name: 'dept' })

const deptTree = ref([
  {
    id: 1,
    name: '技术部',
    code: 'TECH',
    leader: '张三',
    phone: '13800138001',
    employeeCount: 25,
    status: 'active',
    sort: 1,
    description: '负责系统开发和维护',
    children: [
      {
        id: 2,
        name: '前端组',
        code: 'TECH-FE',
        leader: '李四',
        phone: '13800138002',
        employeeCount: 8,
        status: 'active',
        sort: 1,
      },
      {
        id: 3,
        name: '后端组',
        code: 'TECH-BE',
        leader: '王五',
        phone: '13800138003',
        employeeCount: 12,
        status: 'active',
        sort: 2,
      },
      {
        id: 4,
        name: '测试组',
        code: 'TECH-QA',
        leader: '赵六',
        phone: '13800138004',
        employeeCount: 5,
        status: 'active',
        sort: 3,
      },
    ],
  },
  {
    id: 5,
    name: '产品部',
    code: 'PROD',
    leader: '钱七',
    phone: '13800138005',
    employeeCount: 15,
    status: 'active',
    sort: 2,
    description: '负责产品规划和设计',
    children: [
      {
        id: 6,
        name: '产品设计组',
        code: 'PROD-DESIGN',
        leader: '孙八',
        phone: '13800138006',
        employeeCount: 6,
        status: 'active',
        sort: 1,
      },
      {
        id: 7,
        name: '产品运营组',
        code: 'PROD-OP',
        leader: '周九',
        phone: '13800138007',
        employeeCount: 9,
        status: 'active',
        sort: 2,
      },
    ],
  },
  {
    id: 8,
    name: '运营部',
    code: 'OP',
    leader: '吴十',
    phone: '13800138008',
    employeeCount: 20,
    status: 'active',
    sort: 3,
    description: '负责市场运营和客户服务',
    children: [
      {
        id: 9,
        name: '市场组',
        code: 'OP-MARKET',
        leader: '郑十一',
        phone: '13800138009',
        employeeCount: 8,
        status: 'active',
        sort: 1,
      },
      {
        id: 10,
        name: '客服组',
        code: 'OP-SERVICE',
        leader: '王十二',
        phone: '13800138010',
        employeeCount: 12,
        status: 'active',
        sort: 2,
      },
    ],
  },
])

const selectedDept = ref<any>(null)

const totalDepts = computed(() => {
  let count = 0
  deptTree.value.forEach((dept) => {
    count++
    if (dept.children) {
      count += dept.children.length
    }
  })
  return count
})

const activeDepts = computed(() => {
  let count = 0
  deptTree.value.forEach((dept) => {
    if (dept.status === 'active') count++
    if (dept.children) {
      dept.children.forEach((child) => {
        if (child.status === 'active') count++
      })
    }
  })
  return count
})

const totalEmployees = computed(() => {
  let count = 0
  deptTree.value.forEach((dept) => {
    count += dept.employeeCount
    if (dept.children) {
      dept.children.forEach((child) => {
        count += child.employeeCount
      })
    }
  })
  return count
})

const deptLevels = computed(() => 2) // 假设最多2级部门

function getStatusBadgeClass(status: string) {
  return status === 'active'
    ? 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full'
    : 'px-2 py-1 bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400 text-xs rounded-full'
}
</script>
